<template>
  <div>
    <crudTable ref="crud"
               :option="option"
               :data="data"
               :page="page"
               :searchOptions="searchOptions"
               :dialogOption="dialogOption"
               :request="request"
               @onLoad="onLoad"
               @handleCurrentChange="handleCurrentChange"
               @handleSizeChange="handleSizeChange"
               @getQuery="getQuery">
      <template v-slot:cpagination>
        <!-- <div >cpagination插槽</div> -->
        <!-- 之后需要往分页左边放内容就写在上面的div里 -->
      </template>
      
      <template v-slot:table_imgUrl="{row}">
        <img :src="row.imgUrl" style="width:50px;height:50px;">
      </template>
    </crudTable>
  </div>
</template>

<script>
import { advertList as getList,advertOperation as add,bannerDelete as remove} from '@/api/adminConfig/bannerConfig'

export default {
  data() {
    return {
      dialogOption:{
        labelWidth:'100px',
        submitBtn:false,
        reBackBtn:false,
        items:[
          {
            label:'标题',
            type:'text',
            key:'title',
            placeholder:'请输入标题',
            style:'width:100%;',
            rules:[
              { required: true, message: '请输入标题', trigger: 'blur' },
            ]
          },
          {
            label:'网图地址',
            type:'text',
            key:'uri',
            placeholder:'请输入一个网络图片的地址',
            style:'width:100%;',
          },
          {
            label:'图片',
            type:'img',
            key:'base64File',
            rules:[
              { required: true, message: '请上传图片' },
            ],
            watch:(n)=>{
              console.log(n)
            },
          },
          {
            label:'排序',
            type:'text',
            key:'sort',
            rules:[
              { required: true, message: '请输入序号', trigger: 'blur' },
            ]
          },
        ],
      },
      query: {},
      //搜索框配置项
      searchOptions: {
        clearBtn:true,
        items: [
        ]
      },
      //表格数据
      data: [],
      //表单调用的接口
      request:{
        add,
        remove,
        edit:add,
        view:function(row,index){
          return row
        }
      },
      //表格配置选项
      option: {
        addBtn:true,
        editBtn:true,
        deleteBtn:true,
        isOperation:true,
        operationWidth:' ',
        isSearch: false,
        isPage:false,
        excelBtn: false,//是否展示Excel按钮
        height: '700',//是否设置高度（超出会显示滚动条）
        isIndex: true,//是否需要索引项
        //表格项配置
        items: [
          {
            key: 'title',
            label: '标题',
            align: 'center',
          },
          {
            key: 'imgUrl',
            label: '图片',
            align: 'center',
            type:'slot',
            slotName:'imgUrl',
          },
          {
            key:'uri',
            label:'图片网络地址',
            align:'center',
          },
          {
            key:'sort',
            label:'排序',
            align:'center'
          },
        ]
      },
      //分页数据
      page: {
        pageSize: 20,//默认页码大小
        total: 0,//总数
        currentPage: 1//当前页
      },
    }
  },
  methods: {
    //获取参数
    getQuery(query) {
      this.query = query
    },
    //页面加载事件
    onLoad({page, query}) {
      let params = {
        ...page,
        ...query
      }
      getList(params).then(res => {
        let { data,currentPage,pageSize,total } = res
        if (!data) {
          this.$message('数据读取失败')
          return
        }
        this.data = data.map(el=>{
          return{
            base64File:el.imgUrl,
            ...el,
          }
        })
        this.page = {
          currentPage,pageSize,total
        }
        
      }).catch(error => {
        this.$message(error)
        this.data = []
      })
    },
    // 分页组件事件开始
    // 当前页改变事件
    handleCurrentChange({currentPage}) {
      this.page.currentPage = currentPage
    },
    //每页展示数量改变触发
    handleSizeChange({pageSize}) {
      this.page.pageSize = pageSize
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
